<template>
  <div>
    <dl v-for="item in kj" :key="item.id" @click="go(item.id)">
      <dt>
        <img :src="item.pic" alt="" />
      </dt>
      <dd>
        <h4>{{ item.characteristic }}</h4>
        <p class="he">{{ item.name }}</p>
        <aside>
          <p>
            <span class="aa">￥{{ item.minPrice }}</span
            ><br />
            <span>低价</span>
          </p>
          <p>
            <span>￥{{ item.minScore }}</span
            ><br />
            <span>原价</span>
          </p>
          <p>
            <span>{{ item.numberSells }}</span
            ><br />
            <span>限量</span>
          </p>
        </aside>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  props: ["kj"],
  data() {
    return {};
  },
  methods: {
    go(id) {
      this.$router.push("/detail?id=" + id);
    },
  },
};
</script>
<style lang="scss" scoped>
dl {
  width: 100%;
  display: flex;
  padding-top: 4px;
  border-bottom: 1px solid #cccccc;
  dt {
    width: 30%;
    img {
      width: 100%;
    }
  }
  dd {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 6px;
    .aa {
      color: red;
    }
    .he {
      margin-bottom: 50px;
      color: #cccccc;
    }
    aside {
      width: 100%;
      display: flex;
      padding-bottom: 5px;
      p {
        width: 33%;
      }
    }
  }
}
</style>